<script setup lang="ts">
import SubmitCalendar from "./SubmitCalendar.vue";
import {useRoute} from "vue-router";
import {onMounted, ref} from "vue";
import {JudgeControllerService} from "../../../../generated";

interface Props {
  totalSubmit?: number;
  totalSubmitDay?: number;
  continuousSubmit?: number;
  data?: string[][];
}

const timeRange = ref(0)
const timeOptions = [
  {
    value: 0,
    label: '过去一年'
  }
]

let submitStats = ref<Props>({
  totalSubmit: 0,
  totalSubmitDay: 0,
  continuousSubmit: 0,
  data: []
});

let route = useRoute();

onMounted(async () => {
  let res = await JudgeControllerService.getSubmitHistoryUsingGet(route.params.account as string);
  if (res.code === 0 && res.data) {
    submitStats.value = res.data;
  }
})
</script>

<template>
  <div class="submit-stats">
    <div class="submit-header">
      <div class="submit-left">
        <span class="submit-title">过去一年共提交 <span class="submit-count">{{
            submitStats.totalSubmit
          }}</span> 次</span>
      </div>
      <div class="submit-right">
        <div class="submit-details">
          <span>累计提交天数: <span class="detail-count">{{ submitStats.totalSubmitDay }}</span></span>
          <span>连续提交天数: <span class="detail-count">{{ submitStats.continuousSubmit }}</span></span>
        </div>
        <el-select
            :model-value="timeRange"
            class="time-select"
            size="small"
            popper-class="time-select-dropdown"
        >
          <el-option
              v-for="item in timeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </div>
    </div>
    <SubmitCalendar :data="submitStats.data"/>
  </div>
</template>

<style scoped>
.submit-stats {
  padding: 0;
}

.submit-header {
  padding: 0 16px;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 12px;
}

.submit-left {
  flex: 1;
}

.submit-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.submit-title {
  font-size: 16px;
  color: #262626BF;
  font-weight: 500;
}

.submit-count {
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 500;
  color: #262626;
}

.submit-details {
  display: flex;
  align-items: center;
  gap: 16px;
  color: #3c3c4399;
  font-size: 14px;
}

.detail-count {
  color: #262626bf;
  font-weight: 500;
}

.time-select {
  width: 110px;
}

@media (max-width: 576px) {
  .submit-right {
    width: 100%;
    justify-content: space-between;
  }

  .submit-details {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}
</style>
